"""
@author: Gaoyaoxia
@date: 2021-03-16 16:11:52
"""
<!-- 回复通知 -->
<template>
  <div class="suggest-detail-content">
    <img
      class="top-bg"
      :src="require('assets/images/proposal/header-bg.jpg')"
      alt
    />
    <div class="main-content">
      <div class="detail-content">
        <div class="detail-title">
          <h3>关于印发冬春季农村地区新冠肺炎疫情防控工作方案的通知</h3>
        </div>
        <div class="detail-title-time">
          <p>发布单位：<span>政协开发</span></p>
          <p>发布时间：<span>2021-03-12 12:54</span></p>
        </div>
        <div class="detail-word word">
          <p>0123</p>
        </div>
        <div class="detail-title-time" style="height: auto">
          <div class="artical-label-div">
            <span>备注信息：无</span>
          </div>
        </div>
        <div class="attachment"></div>
        <div class="evaluation-content">
          <a-textarea
            placeholder="请填写回复内容"
            v-model="strReplyContent"
            :maxLength="500"
          ></a-textarea>
          <div class="btn-content">
            <span>最多可以输入500字</span>
            <a-button type="primary" class="fr">回复提交</a-button>
          </div>
        </div>
        <div class="bottom-content">
          <a-button type="primary">关闭</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
  created() {}
}
</script>
<style lang='less' scoped>
.suggest-detail-content {
  width: 100%;
  background: #f5f5f5;
  height: 100%;
  position: relative;
  overflow: hidden;
  img {
    width: 100%;
    font-size: 0;
    z-index: 1;
  }
  .main-content {
    width: 1200px;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -600px;
    z-index: 999;
    padding: 30px;
    box-sizing: border-box;
  }
  .detail-title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 40px;
  }
  .detail-title-time {
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    color: #666666;
    background: #f6f7f7;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 35px;
    p {
      display: inline-block;
      margin-right: 25px;
    }
  }
  .detail-word {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .bottom-content {
    text-align: center;
    margin-top: 80px;
  }
}
img {
  display: inline-block;
  border: none;
  vertical-align: middle;
}
.word {
  font-family: 'SimSun';
  font-size: 16px;
  color: #333;
  text-indent: 2em;
  line-height: 1.5;
}
.artical-label-div {
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 16px;
}
.attachment {
  margin-top: 15px;
}
.evaluation-content {
  position: relative;
  margin-top: 30px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  /deep/textarea.ant-input {
    height: 220px;
    border: none;
    background: #f9f9f9;
    font-size: 16px;
  }
}
.btn-content {
  border-top: 1px solid #e5e5e5;
  height: 47px;
  background: #ffffff;
  line-height: 47px;
  padding: 0 10px 0 25px;
  color: #8d8d8d;
  font-size: 14px;
  /deep/.ant-btn {
    margin-top: 6px;
  }
  .fr {
    float: right;
  }
}
.bottom-content {
  padding-bottom: 50px;
}
</style>